<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //获取cookie中的值
        // console.log( document.cookie );
        
        //保存值到cookie中
        document.cookie = "name=张三; expires=" + new Date( new Date().getTime() + 24*60*60*1000);
        
        //保存值到cookie中
        document.cookie = "age=30";

        //保存值到cookie中
        document.cookie = "sex=true";

        //保存值到cookie中 , 引用类型的数据需要先转为json字符串
        document.cookie = "hobby="+JSON.stringify( [{a:[],b:{},c:"sdfs"},{},{}] );

        //保存值到cookie中
        //document.cookie = "age=40";//同名会有覆盖现象
        
        //获取cookie中的值
        console.log( document.cookie );


        //功能: 传入一个属性名, 返回这个属性名对应的值
        function getCookie( key ){
            //1.获取cookie中的所有值( 字符串类型 )
            var c = document.cookie; //name=张三; sex=true; age=30

            //2.将字符串分割, 用 分号+空格 分割
            var arr = c.split('; '); //['name=张三','sex=true','age=30']

            //3.遍历第2步得到的数组,将数组中每个字符串用 = 进行分割, 将分割得到的属性名作为对象的属性名, 将分割得到的属性值作为对象的属性值
            var obj = {};
            arr.forEach((item)=>{ // item 是 'name=张三' 或 'sex=true' 或 'age=30'
                var arr2 = item.split('='); // ['name','张三']
                obj[arr2[0]] = arr2[1];
            })

            return obj[key];
        }

        console.log( getCookie('name') );
        console.log( getCookie('age') );
        console.log( getCookie('sex') );
        console.log( getCookie('hobby') );

    </script>
</body>
</html>